<template>
  <div class="paihang">
    <div class="card">
      <h3 class="guanfang">官方榜</h3>
      <div class="biaoshen">
        <img :src="biaoshen.coverImgUrl" alt="" />
        <ol>
          <li
            v-for="item in biaoshen.tracks"
            :key="item.id"
            @click="player(item.id)"
          >
            {{ item.name }}
          </li>
        </ol>
      </div>
      <div class="xinge">
        <img :src="xinge.coverImgUrl" alt="" />
        <ol>
          <li
            v-for="item in xinge.tracks"
            :key="item.id"
            @click="player(item.id)"
          >
            {{ item.name }}
          </li>
        </ol>
      </div>
      <h3 class="quanqiubang">全球榜</h3>
      <div class="global">
        <div
          class="quanqiu"
          v-for="item in quanqiu"
          :key="item.id"
          @click="toMusiclistdetail(item.id)"
        >
          <img :src="item.coverImgUrl" alt="" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/request/request";

export default {
  data() {
    return {
      biaoshen: {},
      xinge: {},
      quanqiu: [],
    };
  },
  methods: {
    toMusiclistdetail(id) {
      this.$router.push(`/musiclistdetail/${id}`);
    },
    player(id) {
      this.$store.commit("updateMusicId", id);
    },
  },
  created() {
    request("/playlist/detail?id=" + 19723756).then((res) => {
      this.biaoshen = res.data.playlist;
    });
    request("/playlist/detail?id=" + 3779629).then((res) => {
      this.xinge = res.data.playlist;
    });
    request("/toplist").then((res) => {
      // this.shuochang=res.data.toplist;
      this.quanqiu = res.data.list;
    });
  },
};
</script>

<style lang="less" scoped>
.paihang {
  display: flex;
  justify-content: center;
  .guanfang {
    margin-top: 30px;
  }
  .quanqiubang {
    margin-top: 30px;
  }
  .card {
    width: 1000px;
    .biaoshen {
      display: flex;
      justify-content: flex-start;
      margin-top: 50px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 20px;
      }
      ol {
        padding-left: 50px;
        height: 200px;
        overflow: hidden;
        li {
          padding: 5px;
          cursor: pointer;
        }
      }
    }
    .xinge {
      display: flex;
      justify-content: flex-start;
      margin-top: 50px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 20px;
      }
      ol {
        padding-left: 50px;
        height: 200px;
        overflow: hidden;
        li {
          padding: 5px;
          cursor: pointer;
        }
      }
    }
    .global {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 50px;

      .quanqiu {
        display: flex;
        flex-direction: column;
        margin-right: 20px;
        margin-top: 50px;
        cursor: pointer;
        img {
          width: 180px;
          height: 180px;
          border-radius: 20px;
        }
        span {
          width: 180px;
          padding: 2px 0;
        }
      }
    }
  }
}
</style>